<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @close="cleaForm"
      :before-close="handleClose"
    >
      <el-form
        :model="orderForm"
        class="demo-form-inline"
        ref="orderFormRef"
        :rules="rules"
      >
        <el-form-item label="标记记录" :label-width="formLabelWidth">
          <el-input
            v-model="orderForm.creditRating"
            placeholder="标记记录"
          ></el-input>
        </el-form-item>
        <el-form-item label="平台" :label-width="formLabelWidth">
          <el-input
            v-model="orderForm.orderPlatform"
            placeholder="平台"
          ></el-input>
        </el-form-item>
        <el-form-item
          id=""
          label="订单编号"
          prop="orderNumber"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="orderForm.orderNumber"
            autocomplete="off"
            placeholder="订单编号"
          ></el-input
        ></el-form-item>
        <el-form-item
          id=""
          label="发 货 日"
          prop="deliveryDate"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="orderForm.deliveryDate"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker
        ></el-form-item>

        <el-form-item
          label="运 费"
          prop="freight"
          :label-width="formLabelWidth"
        >
          <el-select v-model="orderForm.freight" placeholder="运费">
            <el-option label="寄 付" value="寄付"></el-option>
            <el-option label="包 邮" value="包邮"></el-option>
            <el-option label="到 付" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="型 号"
          prop="tradeName"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="orderForm.tradeName"
            autocomplete="off"
            placeholder="型 号"
          ></el-input
        ></el-form-item>

        <el-form-item
          label="商品名称"
          prop="setMeal"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="orderForm.setMeal"
            autocomplete="off"
            placeholder="商品名称"
          ></el-input
        ></el-form-item>

        <el-form-item label="备 注" prop="remark" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="orderForm.remark"
          >
          </el-input>
        </el-form-item>

        <el-form-item
          label="收 件 人"
          prop="userName"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="orderForm.userName"
            autocomplete="off"
            placeholder="收件人"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="收货手机号"
          prop="phone"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="orderForm.phone"
            autocomplete="off"
            placeholder="收货手机号"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="收货地址"
          prop="address"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="orderForm.address"
            autocomplete="off"
            placeholder="收货地址"
          ></el-input>
        </el-form-item>

        <el-form-item label="起租日" :label-width="formLabelWidth">
          <el-date-picker
            v-model="orderForm.startTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="天数"
          prop="duration"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model.number="orderForm.duration"
            autocomplete="off"
            placeholder="天数"
          ></el-input>
        </el-form-item>

        <el-form-item label="租金" prop="money" :label-width="formLabelWidth">
          <el-input
            v-model.number="orderForm.money"
            autocomplete="off"
            placeholder="租金"
          ></el-input>
        </el-form-item>

        <el-form-item label="下单日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="orderForm.orderDate"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="订单状态" :label-width="formLabelWidth">
              <el-select v-model="orderForm.orderStatus" placeholder="订单状态">
                <el-option label="0-未标记" value="0"></el-option>
                <el-option label="1-已标记" value="1"></el-option>
                <el-option label="2-待发货" value="2"></el-option>
                <el-option label="8-待取消" value="8"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扣款状态" :label-width="formLabelWidth">
              <el-select v-model="orderForm.debitStatus" placeholder="扣款状态">
                <el-option label="0-未扣款" value="0"></el-option>
                <el-option label="1-已扣款" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="库存状态" :label-width="formLabelWidth">
              <el-select v-model="orderForm.stockStatus" placeholder="扣款状态">
                <el-option label="0-未减库存" value="0"></el-option>
                <el-option label="1-已减库存" value="1"></el-option>
                <el-option label="2-没有库存" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="地址状态" :label-width="formLabelWidth">
              <el-select
                v-model="orderForm.addressStatus"
                placeholder="订单状态"
              >
                <el-option label="0-正常" value="0"></el-option>
                <el-option label="1-地址需核实" value="1"></el-option>
                <el-option label="2-收货秘钥" value="2"></el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="订单重复" :label-width="formLabelWidth">
              <el-select
                v-model="orderForm.orderDuplication"
                placeholder="订单重复"
              >
                <el-option label="0-正常" value="0"></el-option>
                <el-option label="1-重复" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作人" :label-width="formLabelWidth">
              <el-input
                v-model="orderForm.operator"
                autocomplete="off"
                placeholder="操作人"
                style="width: 180px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrder" :loading="loading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import orderApi from "@/api/order";

export default {
  name: "OrderDialog",
  props: {
    // 对话框是否可见
    dialogFormVisible: Boolean,
    orderForm: Object,
  },
  data() {
    var checkPhone = (rule, value, callback) => {
      var reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!reg.test(value)) {
        return callback(new Error("手机格式错误"));
      }
      callback();
    };
    return {
      // 订单状态
      orderStatus: 0,

      formLabelWidth: "130px",

      loading: false,
      // 对话框标题
      title: "",

      orderForm: {},
      rules: {
        tradeName: [
          { required: true, message: "请输入型号", trigger: "blur" },
          {
            min: 2,
            max: 100,
            message: "长度在 2 到 100 个字符",
            trigger: "blur",
          },
        ],
        setMeal: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 2,
            max: 255,
            message: "长度在 2 到 255 个字符",
            trigger: "blur",
          },
        ],
        userName: [
          { required: true, message: "请输入收件人", trigger: "blur" },
          {
            min: 1,
            max: 26,
            message: "长度在 1 到 26 个字符",
            trigger: "blur",
          },
        ],
        address: [
          { required: true, message: "请输入收货地址", trigger: "blur" },
          {
            min: 12,
            max: 255,
            message: "长度在 12 到 255 个字符",
            trigger: "blur",
          },
        ],

        phone: [{ validator: checkPhone, trigger: "blur" }],
        money: [{ type: "number", message: "请输入正确的金额" }],
        duration: [
          {
            type: "number",
            message: "请输入正确的租期天数",
          },
        ],
      },
    };
  },

  methods: {
    // 清理表单数据
    cleaForm() {
      // 清理数据
      this.orderForm = {};
      this.$refs.orderFormRef.clearValidate();
    },

    // 确认关闭对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    // 添加订单
    saveOrder() {
      this.$refs.orderFormRef.validate((valid) => {
        if (valid) {
          this.loading = true;
          // 提交数据给后台
          orderApi.saveOrder(this.orderForm).then((response) => {
            this.$message({
              showClose: true,
              message: response.message,
              type: "success",
            });
            // 关闭对话框
            this.dialogFormVisible = false;
            // 刷新表单
            this.getOrderList();
            this.loading = false;
          });
        } else {
          // 验证不通过
          this.$message({
            showClose: true,
            message: "表单验证不通过",
            type: "error",
          });
          this.loading = false;
          return false;
        }
      });
    },
  },
};
</script>
